<template>
	<view class="content">
		<view class="nuter">
			<view :class="target==0?'active':''" @click="setIndex" data-index="0">
			 		最新
			 </view>
			<view :class="target==1?'active':''" @click="setIndex" data-index="1">
					最热
			 </view>
			<view :class="target==2?'active':''" @click="setIndex" data-index="2">
			 		我的
			</view>
		</view>
		<swiper 
		:duration="500" 
		:current="thisindex"  
		:data-index='thisindex' 
		@change="toggle"
		circular>
			<swiper-item>
				<!-- 按顺序对应第一个的内容 -->
				<u-list @scrolltolower="scrolltolower1" v-if="sceneryList.length>0">
					<u-list-item
						v-for="(item, index) in sceneryList"
						:key="item.post.id"
					>
						<view class="u-demo-block__content">
							<view class="album">
							  <view class="album__avatar">
								<u-avatar size="44" :src="item.user.avatar"></u-avatar>
							  </view>
							  <view class="album__content">
								<u-row>
									<u-col span="8">
										<u--text
										  :text="item.user.nickname"
										  type="primary"
										  bold
										  size="17"
										  lines="5"
										></u--text>
									</u-col>
									<u-col span="3">
										<u-icon v-if="item.likeStatus==1" @click="startClick(item)" :label="item.likeCount" labelPos="left" name="heart-fill" color="red" size="22"></u-icon>
										<u-icon v-else :label="item.likeCount" @click="startClick(item)" labelPos="left" name="heart" color="#333" size="22"></u-icon>
									</u-col>
								</u-row>
								<u--text
								  margin="0 0 8px 0"
								  :text="item.post.content"
								></u--text>
								<u-album :urls="item.post.imgUrls"></u-album>
							  </view>
							</view>
						</view>
					</u-list-item>
				</u-list>
				<u-empty
						v-else
						text="暂无发布校园风景哦!"
						textSize="20"
						textColor="#8f99a3"
						iconColor="blue"
						iconSize="160"
						marginTop="10"
						mode="list"
						icon="http://cdn.uviewui.com/uview/empty/list.png"
				></u-empty>
			</swiper-item>
			<swiper-item>
				<!-- 按顺序对应第二个的内容 -->
				<u-list @scrolltolower="scrolltolower2" v-if="hotList.length>0">
					<u-list-item
						v-for="(item, index) in hotList"
						:key="item.post.id"
					>
						<view class="u-demo-block__content">
							<view class="album">
							  <view class="album__avatar">
								<u-avatar size="44" :src="item.user.avatar"></u-avatar>
							  </view>
							  <view class="album__content">
								<u-row>
									<u-col span="8">
										<u--text
										  :text="item.user.nickname"
										  type="primary"
										  bold
										  size="17"
										  lines="5"
										></u--text>
									</u-col>
									<u-col span="3">
										<u-icon v-if="item.likeStatus==1" @click="startClick(item)" :label="item.likeCount" labelPos="left" name="heart-fill" color="red" size="22"></u-icon>
										<u-icon v-else :label="item.likeCount" @click="startClick(item)" labelPos="left" name="heart" color="#333" size="22"></u-icon>
									</u-col>
								</u-row>
								<u--text
								  margin="0 0 8px 0"
								  :text="item.post.content"
								></u--text>
								<u-album :urls="item.post.imgUrls"></u-album>
							  </view>
							</view>
						</view>
					</u-list-item>
				</u-list>
				<u-empty
						v-else
						text="暂无发布校园风景哦!"
						textSize="20"
						textColor="#8f99a3"
						iconColor="blue"
						iconSize="160"
						marginTop="10"
						mode="list"
						icon="http://cdn.uviewui.com/uview/empty/list.png"
				></u-empty>
			</swiper-item>
			<swiper-item>
				<!-- 按顺序对应第三个的内容 -->
				<u-list @scrolltolower="scrolltolower1" v-if="myList.length>0">
					<u-list-item
						v-for="(item, index) in myList"
						:key="item.post.id"
					>
						<view class="u-demo-block__content">
							<view class="album">
							  <view class="album__avatar">
								<u-avatar size="44" :src="item.user.avatar"></u-avatar>
							  </view>
							  <view class="album__content">
								<u-row>
									<u-col span="9">
										<u--text
										  :text="item.user.nickname"
										  type="primary"
										  bold
										  size="17"
										  lines="5"
										></u--text>
									</u-col>
									<u-col span="3">
										<u-button shape="circle" type="error" customStyle="font-weight: bold;margin-right: 5px;" size="mini" text="删除" @click="del(item.post.id)" color="rgb(255,87,87)"></u-button>
									</u-col>
								</u-row>
								<u--text
								  margin="8px 0 8px 0"
								  :text="item.post.content"
								></u--text>
								<u-album v-if="item.post.imgUrls.length>0" :urls="item.post.imgUrls"></u-album>
								<u-row customStyle="padding-top: 16rpx;">
									<u-col span="3" offset="9">
										<text style="font-size: 14px;color: #7f7f7f;">点赞量：{{item.likeCount}}</text>
									</u-col>
								</u-row>
							  </view>
							</view>
						</view>
						
					</u-list-item>
				</u-list>
				<u-empty
						v-else
						text="暂无发布校园风景哦!"
						textSize="20"
						textColor="#8f99a3"
						iconColor="blue"
						iconSize="160"
						marginTop="10"
						mode="list"
						icon="http://cdn.uviewui.com/uview/empty/list.png"
				></u-empty>
			</swiper-item>
		</swiper>
		
		<u-tabbar
			@change="change1"
			:border="true"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<view class="ap_bt" @click="publishScenery()">
				<u-icon name="plus-circle-fill" color="#2979ff" size="44"></u-icon>
				<!-- <image src="../../static/leave_unused.png" style="width: 40px;height: 40px;"></image> -->
			</view>
		</u-tabbar>
		<u-toast ref="uToast"></u-toast>
		<!-- 提示框 -->
		<u-modal 
			:show="hintShow" 
			:showCancelButton="true" 
			:closeOnClickOverlay="true" 
			@confirm="finish" 
			@cancel="hintShow=false">
				<view class="slot-content">
					<text>是否确定删除该内容?</text>
				</view>
		</u-modal>
	</view>
</template>

<script>
	import {getPostsList, likePost, deletePost} from '@/utils/api.js'
	export default {
		// 只要上面的选项跟下面的swiper-item个数相同，直接加上面的个数，下面的会自动对应显示，很简便，拿来就能用
		data() {
			return {
				// 当前样式
				target:0,
				// 当前item位置
				thisindex:0,
				albumWidth: 0,
				
				sceneryList: [],
				hotList: [],
				myList: [],
				query: {pageNo: 1, pageSize: 10, type: 2, isHot: 0, isMe: 0},
				flag: false,
				postId: null,
				hintShow: false,
			}
		},
		onLoad(option) {
			//this.query.type = option.type
			this.getList()
		},
		methods: {
			del(postId){
				this.postId = postId
				this.hintShow = true
			},
			finish(){
				const _that = this
				_that.hintShow = false
				deletePost({id: _that.postId, status: 1, postsType: 2}).then(res => {
					getApp().globalData.toast[0].message = '删除成功'
					_that.$refs.uToast.show({
						...getApp().globalData.toast[0],
						complete() {
							_that.commonQuery(_that.thisindex)
						}
					})
				}).catch(err=>{console.log('error->', err.message)})
			},
			commonQuery(index){
				this.flag = false
				this.query.pageNo = 1
				this.query.isMe = 0
				this.query.isHot = 0
				if(index == 0){
					this.sceneryList = []
				}else if(index == 1){
					this.hotList = []
					this.query.isHot = 1
				}else {
					this.myList = []
					this.query.isMe = 1
				}
				this.getList()
			},
			// 切换触发的事件
			toggle(e){
				let index = e.detail.current
				this.target = index
				this.commonQuery(index)
			},
			// 点击nav控制下面的展示 (点击触发, 切换也会触发, 所以不需要再发请求)
			setIndex(e){
				let index = e.currentTarget.dataset.index
				this.thisindex = index
			},
			startClick(obj){
				likePost({entityType: 2, entityId: obj.post.id}).then(res => {
					if(obj.likeStatus == 1){
						obj.likeStatus = 0
						obj.likeCount--
					}else {
						obj.likeStatus = 1
						obj.likeCount++
					}
				})
			},
			scrolltolower1() {
				//下拉加载
				if(!this.flag){
					this.query.pageNo++
					this.getList()
				}else {
					this.flag = true
				}
			},
			scrolltolower2() {
				//下拉加载
				if(!this.flag){
					this.query.pageNo++
					this.getList()
				}else {
					this.flag = true
				}
			},
			getList(index){
				if(index != null){
					this.toggle({detail:{current: 0}})
					return
				} 
				getPostsList({params: this.query}).then(res => {
					for (let i = 0; i < res.list.length; i++) {
						res.list[i].post.imgUrls = res.list[i].post.imgUrls!=null?res.list[i].post.imgUrls.split(","):[]
					}
					if(this.query.isHot == 1){
						this.hotList = this.hotList.concat(res.list)
					}else {
						if(this.query.isMe == 0){
							this.sceneryList = this.sceneryList.concat(res.list)
						}else{
							this.myList = this.myList.concat(res.list)
						}
					}
					if(res.list.length == 0) this.flag = true
				}).catch(err => {
					getApp().globalData.toast[1].message = '加载数据失败'
					this.$refs.uToast.show({
						...getApp().globalData.toast[1],
						complete() {
							//回调
						}
					})
				})
			},
			publishScenery(){
				uni.$u.route(`/pages/publish-scenery/publish-scenery?type=${this.query.type}`);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.ap_bt{
			position: relative;
			top: -20rpx;
			margin: 0 auto;
		}
	}
	.nuter{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-around;
		font-size: 30rpx;
		view{
			flex: 1;
			font-size: 26rpx;
			text-align: center;
			transition: all 0.5s ease .1s;
			/* background-color: #f0f0f0; */
		}
	}
	.active{
		box-sizing: border-box;
		color: #007AFF;
		border-bottom: 4rpx solid #00aaff;
		/* background-color: #f3ffff; */
		border-radius: 10rpx;
		/* box-shadow: 3px 3px 5px #888888; */
	}
	swiper{
		min-height: 100vh;
	}
	swiper-item{
		width: 100%;
		overflow: hidden;
		padding: 30rpx 30rpx;
		overflow-y: scroll;
		box-sizing: border-box;
		/* background-color: red; */
	}
	
	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			 /* background-color: $u-bg-color; */
			padding: 5px;
			border-radius: 3px;
		 }

		&__content {
			margin-bottom: 15px;
			margin-left: 10px;
			padding-right: 10rpx;
			flex: 1;
		 }
	}
</style>
